<template>
  <div>
    <ul>
      <!-- 需要创建谁,就把v-for 写在谁身上 -->
      <!-- 必须要写key 要不然页面会报错,但是也可以用 ,key要保证唯一性,有id就用id,没id就用下标 -->
      <!-- <li v-for="(itme,index) in arr" :key="index">{{itme}}
        <input type="text"></li> -->
        <!-- key 用id 就不会出现bug了  内容就会跟着标签走  手拉手找朋友 -->
        <li v-for="itme in arr" :key="itme.id">{{itme.name}}
        <input type="text"></li>

    </ul>
    <!-- vue的就地复用策略
             对比虚拟dom的差异 就地(同层级,同位置),复用解构
    为什么要要对比虚拟dom呢? 什么是虚拟dom呢
       真是dom太复杂,虚拟dom就是一个描述真是dom的对象
    diff算法如何比较新旧虚拟dom?
       1.先对比根元素
       更元素改变-删除当前dom树重新键
       根元素未变-对比属性-更改属性,并考虑向下递归对比复用
       2.同级兄弟元素,对比更新
       无key -就地按下标更新/有key-按key比较 -->
    <button @click="fn">添加</button>
  </div>
</template>

<script>
export default {
data(){
  return {
    // arr:['赵','钱','孙','李','周'],
     arr:[{id:11,name:'赵'},{id:22,name:'钱'},{id:33,name:'孙'},{id:44,name:'李'}],
  }
},
methods:{
  fn(){
    this.arr.splice(1,0,{id:55,name:'肖'})
  }
}
}
</script>

<style>

</style>